<template>
  <div class="home">
    <div class="content">
      <div class="left">
        <strong>
          <span style="color: rgb(56, 62, 69);">
            THE HELPER FOR YOU TO
          </span>
          <span>ANNOTATE YOUR</span>
          <span>VOICES~</span>
        </strong>

        <span class="bottom">
          SISU Audio Annotation is an online software aiming to annotating audio files with easy and friendly
          operations(The current versions supports only Chinese-Mandarin audio annotation). Enjoy the tool you need and
          create your own speech corpus efficiently while keeping your data safe!
        </span>

        <div class="btn">
          <button @click="handleSign">Sign up</button>
          <button @click="handleContact">Contact us</button>
        </div>
      </div>
      <div class="right">
        <!-- <img src="http://127.0.0.1:5501/project_0/assets/img/cover.jpg" /> -->

        <el-carousel :interval="4000" type="always" height="200px">
          <el-carousel-item v-for=" ( item, index)  in 3" :key="item">
            <img :src="require(`@/assets/img/${index + 1}.jpg`)" />
          </el-carousel-item>
        </el-carousel>
      </div>

    </div>
    <Footer class="footer" />
  </div>
</template>

<script>
import { test_user_center } from "@/api/tools.js";
import Footer from '@/components/Footer.vue';
export default {
  name: 'HomeView',
  components: {
    Footer
  },
  data() {
    return {
      login: JSON.parse(localStorage.getItem('login')) || null
    }
  },
  mounted() {
    this.login?.email && test_user_center({
      email: this.login.email
      // email: this.$store.state.loginSucInfo.email
      // email: '001@163.com'
    }).then(res => {
      const { code, data } = res || {}
      const { account_info, batch_info } = data || {}
      if (code == 200) {
        this.$store.commit('handleSaveUserInfo', account_info)
        this.$store.commit('handleTableList', batch_info)
      }
      // console.log('--res--', res.data)
    }).catch(err => console.log('err', err))
  },
  methods: {
    handleSign() {
      this.$router.push({ path: '/sign' })
    },
    handleContact() {
      this.$store.commit('handleHighlightHelp', '/help')
      this.$router.push({ path: '/help' })
    }
  },
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;

  div {
    width: 500px;
    height: 300px;
    // border: 1px solid red;
  }

  .left {
    strong {
      span {
        display: block;
        font-size: 25px;
      }
    }

    .bottom {
      display: inline-block;
      margin-top: 20px;
      font-size: 18px;
      font-weight: 600;
    }

    .btn {
      display: flex;
      margin-top: 40px;
      width: 100%;
      height: 40px;
      border: none;

      button {
        background-color: #fff;
        border-radius: 12px;
        font-size: 20px;
        cursor: pointer;
      }

      button:nth-child(2) {
        margin-left: 50px;
      }
    }
  }

  .right {
    img {
      width: 500px;
      height: 315px;
      border-radius: 10px;
    }

    // .el-carousel__item h3 {
    //   color: #475669;
    //   font-size: 18px;
    //   opacity: 0.75;
    //   line-height: 300px;
    //   margin: 0;
    // }

    // .el-carousel__item:nth-child(2n) {
    //   background-color: #99a9bf;
    // }

    // .el-carousel__item:nth-child(2n+1) {
    //   background-color: #d3dce6;
    // }
  }
}

.home {
  position: relative;
  width: 100vw;
  height: 100vh;

  .footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
  }
}

@media screen and (max-width: 1020px) {
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    // height: 650px;

    div:nth-child(1) {
      margin-bottom: 30px;
    }
  }

  .home {
    // width: 100vw;
    // height: 100vh;
    height: 180px !important;
    margin-top: 100px;

    .footer {
      position: relative;
      margin-top: 30px;
      // bottom: 0px;
      // right: 0px;
      // left: 0px;
    }
  }
}
</style>
